<template>
    <div class='p-wrapper'>
        <span>
            <slot>label</slot>&nbsp;&nbsp;
        </span>
        <CheckboxGroup :value="value" @input="change">
            <Checkbox
                :indeterminate="indeterminate"
                :value="checkAll"
                @click.prevent.native="handleCheckAll">全选</Checkbox>
            <Checkbox v-for="(v,k) in src" :key="k" :label="k" >
                <span>{{v}}</span>
            </Checkbox>
        </CheckboxGroup>
        <slot name='append' :model='model' />
    </div>
</template>
<script>
export default {
    name:'checkBoxs',
    props:{
        value:{
            desc:'选中的值 [apple]',
            props:Array,
            default(){
                return [];
            }
        },
        src:{
            desc:'元对象{ apple:"apple",banana:"banana" }',
            type:Object,
            default(){
                return {
                    "false":false,
                    "true":true,
                }
            }
        }
    },
    data(){
        return {
            indeterminate:false,
            model:{},
        }
    },
    computed:{
        checkAll(){
            return this.value.length === Object.keys(this.src).length;
        }
    },
    methods:{
        handleCheckAll () {
            if (this.checkAll) {
                this.change([]);
            } else {
                this.change(Object.keys(this.src));
            }
        },
        change(e){
            if(e.length < Object.keys(this.src).length && e.length > 0){
                this.indeterminate = true;
            }else{
                this.indeterminate = false;
            }
            this.$emit('input',e);
        }
    }
}
</script>
<style lang="less" >
    .p-wrapper {
        display: flex;
        font-size: 14px;
    }
</style>

